<template>
  <div>
    <div class="content">
      <My-Title :title="Title"></My-Title>

      <div class="sub-title">{{ '时间选择' }}</div>

      <div class="m-card-box">
        <div class="drop-down">
          <el-date-picker v-model="timesvalue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            @focus="focus" :clearable="false" range-separator="~" :default-time="['00:00:00']" :readonly="readonly">
          </el-date-picker>
        </div>
      </div>
      <div class="query-btn" @click="queryClick">查询</div>
    </div>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import MyTitle from '@/components/MyModal/title'
import { mapState, mapActions, mapMutations } from 'vuex'

import {
  findCarTrajectory
} from '@/api/hzMJPT/mainInterface.js';


/*当前阶段小时无法请求数据，获取上小时的时间戳*/
let TimeFun = function (time, str, num) {
  // time时间戳,str判断小时、日、月,num判断传出开始时间还是结束时间
  // 结束时间设为当天23:59:59
  let endStr = dayjs.default(time).format('YYYY-MM-DD 23:59:59');
  let endTime = dayjs.default(endStr).toDate();
  
  if (num === 1) {
    return endTime;
  }
  
  // 开始时间设为当天00:00:00
  let startStr = dayjs.default(time).format('YYYY-MM-DD 00:00:00');
  let startTime = dayjs.default(startStr).toDate();
  
  return startTime;
}

let createStHourTime = TimeFun(new Date(), 'day', 0); // 今天0点
let createEndHourTime = TimeFun(new Date(), 'day', 1); // 今天23:59:59
export default {
  name: "CarTrajectory",
  components: {
    MyTitle
  },
  data() {
    return {
      Title: '轨迹查询',
      timesvalue: [createStHourTime, createEndHourTime],
      readonly: false,
    }
  },
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...mapState({
      points: state => state.map.stations
    }),
  },
  mounted() {
  },
  watch: {
    'info': {
      handler: function (val, oldval) {
        createStHourTime = TimeFun(new Date(), 'day', 0)
        createEndHourTime = TimeFun(new Date(), 'day', 1)
        this.timesvalue = [createStHourTime, createEndHourTime]
        this.queryClick()
      },
      immediate: true
    },
  },
  methods: {
    ...mapMutations('map', ['SET_PREV15DAYLINE', 'SET_PREV15DAYPOINTS']),
    ...mapActions('map', ['GetLocusLinesGeo', 'GetCarHistoryPointsGeo']),
    /*时间选择*/
    focus() {
      // 设置时间选择器中样式
      this.$nextTick(() => {
        document.getElementsByClassName('el-time-spinner__wrapper')[0].setAttribute('style', 'width:100%') // 小时列居中
        document.getElementsByClassName('el-time-spinner__wrapper')[3].setAttribute('style', 'width:100%') // 小时列居中
        document.getElementsByClassName('el-time-spinner__wrapper')[1].setAttribute('style', 'display:none') // 隐藏分列
      })
    },
    /*查询*/
    queryClick() {
    
      let that = this
      let stTime = dayjs.default(that.timesvalue[0]).format('YYYY-MM-DD HH:00:00')
      let endTime = dayjs.default(that.timesvalue[1]).format('YYYY-MM-DD HH:00:00')
      this.getPrev15DayLine(stTime, endTime)
      
    },
    // 15天轨迹
    getPrev15DayLine(stTime, endTime) {
      findCarTrajectory({
        vuid: this.info.vuid,
        stTime,
        endTime
      }).then(res => {
        this.$emit('eventTraject', res.data);
      })
    },
    getPrev15DayPoint(stTime, endTime) {
      this.GetCarHistoryPointsGeo({
        plateNo: this.info.plateNo,
        stTime,
        endTime
      }).then(res => {
        let data = gcoord.transform(res, gcoord.WGS84, gcoord.GCJ02)
        this.SET_PREV15DAYPOINTS(data)
      })
    }
  }
}

</script>

<style scoped lang="scss">
.content {
  position: absolute;
  left: 100px;
  top: 0;
  padding: 25px 20px 20px 40px;
  width: calc(100% - 100px);

  .m-card-box {
    width: 100%;
    display: block;
    background: #050e2399;
    border: 1px solid;
    border-image: linear-gradient(90deg,
        #00000000 0%,
        #00fff411 25%,
        #00fff455 50%,
        #00fff411 75%,
        #00000000 100%) 1;
    margin-top: 20px;

    .drop-down {
      width: 100%;
      height: 40px;
      background-color: #0a1f3e;

      ::v-deep {
        .el-range-editor.el-input__inner {
          background-color: transparent;
          border: none;
          padding: 0px 10px;
          width: 100%;
          height: 100%;
          position: relative;
        }

        .el-date-editor .el-range-input {
          background: none;
          font-size: 19px;
          line-height: 33px;
          width: 43%;
          color: #136fcd;
        }

        .el-date-editor .el-range-input::-webkit-input-placeholder {
          font-size: 16px;
          color: #979fa8;
        }

        .el-date-editor .el-range__icon {
          position: absolute;
          right: 10px;
          top: 50%;
          width: 30px;
          height: 30px;
          margin-top: -15px;
          background: url("~@/assets/images/calendar-icon.svg") no-repeat center center;
          background-size: contain;

          &::before {
            display: none;
          }
        }

        .el-date-editor .el-range-separator {
          width: 6%;
          font-size: 30px;
          color: #136fcd;
          line-height: 40px;
        }

        .el-date-editor .el-range__close-icon {
          display: none;
        }

      }
    }
  }

  .sub-title {
    color: #00ffff88;
    font-size: 20px;
    margin-top: 20px;
  }

  .query-btn {
    width: 120px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 20px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(4, 48, 71, 0.6)), to(rgba(13, 180, 197, 0.6)));
    background-image: linear-gradient(0deg, rgba(4, 48, 71, 0.6) 0%, rgba(13, 180, 197, 0.6) 100%);
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #e8edf3;
    cursor: pointer;
  }
}
</style>
